<template>
    <view>
        <u-toast ref="uToast" />
        <!-- #ifndef MP-WEIXIN  -->
        <u-popup class="coreshop-bottom-popup-box" :show="showLogin && sessionAuthIdTool" @close="hideModal" mode="bottom" :closeable="true">
            <view class="radius coreshop-bg-white wrap">
                <view v-if="!showCodeBox">
                    <view class="wrap-content">
                        <view class="coreshop-font-25 coreshop-font-weight-bold coreshop-margin-bottom-50">欢迎登录{{shopName}}</view>
                        <input class="coreshop-solid coreshop-margin-bottom-10 coreshop-padding-bottom-5" type="number" v-model="mobile" placeholder="请输入手机号" />
                        <view class="coreshop-margin-bottom-30 coreshop-margin-top-5 ">未注册的手机号验证后自动创建平台账号</view>
                        <button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
                        <view class="coreshop-flex coreshop-justify-between  coreshop-margin-top-25">
                            <view class="password">一键登录</view>
                            <view class="issue">遇到问题</view>
                        </view>
                    </view>
                    <view class=" coreshop-padding-bottom-30  coreshop-padding-top-30">
                        <view class="hint">
                            登录即代表你同意
                            <text @click="goUserAgreementPage()">用户协议</text>
                            和
                            <text @click="goUserPrivacyPolicy()">隐私政策</text>，
                            并授权使用您的{{shopName}}账号信息（如昵称、头像、收货地址）以便您统一管理
                        </view>
                    </view>
                </view>
                <view class="wrapkey" v-if="showCodeBox">
                    <view class="key-input">
                        <view class="coreshop-font-25 coreshop-font-weight-bold coreshop-margin-bottom-50">输入验证码</view>
                        <view class="coreshop-margin-bottom-30 coreshop-margin-top-5">验证码已发送至 +{{mobile}}</view>
                        <u-code-input :focus="true" v-model="codevalue" @change="change" @finish="finish" mode="box" :maxlength="maxlength"></u-code-input>
                        <text :class="{ error: error }">{{errorMsg}}</text>
                        <view class="captcha">
                            <text :class="{ noCaptcha: verification }" @tap="noCaptcha">收不到验证码点这里</text>
                            <text :class="{ regain: !verification }">{{ timer }}秒后重新获取验证码</text>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
        <!-- #endif  -->
        <!-- #ifdef MP-WEIXIN  -->
        <u-popup class="coreshop-bottom-popup-box" :show="showLogin && sessionAuthIdTool" @close="hideModal" mode="center">
            <view class="radius coreshop-bg-white">
                <view class="modal-box">
                    <view class="modal-box-detail-detail">
                        <view class="shopDesc">
                            <view class="coreshop-avatar sm round margin-left">
                                <u--image width="24px" height="24px" :src="shopLogo"></u--image>
                            </view>
                            <text class="shopName">
                                {{shopName||'登录授权'}}
                            </text>
                            <text class="get">
                                申请
                            </text>
                        </view>
                        <view class="modal-box-detail-title3">获取以下权限为您提供服务</view>
                        <view class="modal-box-detail-desc">
                            1、获取你的手机号提供更好的账户安全，物流，订单状态提醒等服务（在接下来微信授权手机号的弹窗中选择“允许”）<br />
                            2、使用我们的相关服务，需要将您的手机号授权给我们。
                        </view>
                        <!--服务协议-->
                        <view class="coreshop-margin-top-15 coreshop-margin-bottom-30 agreement-checked-view">
                            <u-checkbox-group>
                                <u-checkbox v-model="agreement" :checked="agreement" @change="checkboxChange" size="20" active-color="#19be6b"></u-checkbox>
                            </u-checkbox-group>
                            

                            <view class="coreshop-text-black-view">
                                <text class="coreshop-text-black">同意</text>
                                <text class="text-blue" @tap="goUserAgreementPage">《服务协议》</text>
                                <text class="coreshop-text-black">与</text>
                                <text class="text-blue" @tap="goUserPrivacyPolicy">《隐私协议》</text>
                            </view>
                        </view>
                    </view>
                    <view class="coreshop-flex coreshop-justify-between coreshop-padding-left-15 coreshop-padding-right-15">
                        <view class="coreshop-padding-5">
                            <u-button @click="closeAuth">暂不授权</u-button>
                        </view>
                        <view class="coreshop-padding-5">
                            <u-button type="success" :disabled="isDisabled" v-if="isDisabled">确定授权</u-button>
                            <u-button type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-else>确定授权</u-button>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
        <!-- #endif  -->
    </view>
</template>

<script>
    /**
     * 登录提示页
     * @property {Boolean} value=showLoginTip - 由v-model控制显示隐藏。
     * @property {Boolean} forceOauth - 小程序端特制的全屏登录提示。
     */
    import { mapState } from 'vuex';
    export default {
        name: 'coreshopLoginModal',
        components: {},
        data() {
            return {
                agreement: false,
                isDisabled: true,
                maxMobile: 11,
                mobile: '', // 用户手机号
                code: '', // 短信验证码
                verification: true, // 通过v-show控制显示获取还是倒计时
                timer: 60, // 定义初始时间为60s
                btnb: 'coreshop-btn coreshop-btn-square coreshop-btn-c coreshop-btn-all', //按钮背景
                type: '', // 有值是第三方登录账号绑定
                showCodeBox: false,
                maxlength: 6,
                codevalue: '',
                error: false,
                errorMsg: '验证码错误，请重新输入',
            };
        },
        props: {
            value: {},
            modalType: {
                type: String,
                default: ''
            }
        },
        computed: {
            ...mapState({
                showLoginTip: state => state.showLoginTip,
                sessionAuthId: state => state.sessionAuthId,
                hasLogin: state => state.hasLogin,
            }),
            shopLogo() {
                return this.$store.state.config.shopLogo
            },
            shopName() {
                return this.$store.state.config.shopName;
            },
            showLogin: {
                get() {
                    return this.showLoginTip;
                },
                set(val) {
                    this.$store.commit('showLoginTip', val);
                }
            },
            sessionAuthIdTool: {
                get() {
                    return this.sessionAuthId;
                },
                set(val) {
                    this.$store.commit('sessionAuthId', val);
                }
            },
            inputStyle() {
                let style = {};
                if (this.mobile) {
                    style.color = "#fff";
                    style.backgroundColor = this.$u.color['warning'];
                }
                return style;
            },
            // 验证手机号
            rightMobile() {
                let res = {};
                if (!this.mobile) {
                    res.status = false;
                    res.msg = '请输入手机号';
                } else if (!this.$u.test.mobile(this.mobile)) {
                    res.status = false;
                    res.msg = '手机号格式不正确';
                } else {
                    res.status = true;
                }
                return res;
            },
            // 动态计算发送验证码按钮样式
            sendCodeBtn() {
                let btn = 'coreshop-btn coreshop-btn-g';
                if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
                    return btn + ' coreshop-btn-b';
                } else {
                    return btn;
                }
            },
            // 动态更改登录按钮bg
            regButtonClass() {
                return this.mobile && this.mobile.length === this.maxMobile && this.code ? this.btnb + ' coreshop-btn-b' : this.btnb;
            }
        },
        mounted() {
            const _this = this
            // #ifdef MP-WEIXIN
            var userInfo = this.$store.state.userInfo;
            //var token = this.$db.get('userToken');
            if (Object.keys(userInfo).length != 0) {
                //console.log("获取到store.state用户数据");
            } else {
                _this.$store.commit('userInfo', "");
                _this.doToken();
            }
            // #endif
        },
        //watch: {
        //    'hasLogin': {
        //        handler(newVal) {
        //            //console.log(newVal);
        //            if (newVal == false) {
        //                //console.log("watch监听");
        //                this.doToken();
        //            }
        //        },
        //        deep: true,
        //        immediate: true,
        //    }
        //},
        onShow() {
            let _this = this;
            _this.timer = parseInt(_this.$db.get('timer'));
            if (_this.timer != null && _this.timer > 0) {
                _this.countDown();
                _this.verification = false;
            }
        },
        methods: {
            submit() {
                if (this.$u.test.mobile(this.mobile)) {
                    this.sendCode();
                } else {
                    this.$u.toast('请输入合法的手机号码!');
                }
            },
            // 收不到验证码选择时的选择
            noCaptcha() {
                var _this = this;
                uni.showActionSheet({
                    itemList: ['重新获取验证码'],
                    success: function (res) {
                        _this.sendCode();
                    },
                    fail: function (res) {
                        this.$u.toast('重发失败!');
                    }
                });
            },
            // change事件侦听
            change(value) {
                console.log('change', value);
            },
            // 输入完验证码最后一位执行
            finish(value) {
                this.code = value;
                if (this.sessionAuthIdTool) {
                    this.toBind();
                } else {
                    this.login();
                }
            },
            // 发送短信验证码
            sendCode() {
                if (!this.rightMobile.status) {
                    this.$u.toast(this.rightMobile.msg);
                } else {
                    uni.showToast({ title: '发送中...', icon: 'loading' })
                    setTimeout(() => {
                        uni.hideToast();
                        this.$u.api.sms({ mobile: this.mobile, code: 'login' }).then(res => {
                            if (res.status) {
                                this.showCodeBox = true;
                                this.timer = 60;
                                this.verification = false;
                                this.$refs.uToast.show({ message: res.msg, type: 'success' });
                                this.countDown(); // 执行验证码计时
                            } else {
                                this.$u.toast(res.msg);
                            }
                        });
                    }, 1000);
                }
            },
            // 验证码倒计时
            countDown() {
                let auth_timer = setInterval(() => {
                    // 定时器设置每秒递减
                    this.timer--; // 递减时间
                    uni.setStorage({
                        key: 'timer',
                        data: this.timer,
                        success: function () { }
                    });
                    if (this.timer <= 0) {
                        this.verification = true; // 60s时间结束还原v-show状态并清除定时器
                        clearInterval(auth_timer);
                    }
                }, 1000);
            },
            // 登录
            login() {
                var _this = this;
                if (!_this.rightMobile.status) {
                    _this.$u.toast(_this.rightMobile.msg);
                } else {
                    // 短信验证码登录
                    if (!_this.code) {
                        _this.$u.toast('请输入短信验证码!');
                    } else {
                        let data = {
                            mobile: _this.mobile,
                            code: _this.code
                        };

                        let invicode = _this.$db.get('invitecode');
                        if (invicode) {
                            data.invitecode = invicode;
                        }

                        _this.$u.api.smsLogin(data).then(res => {
                            if (res.status) {
                                _this.$db.set('userToken', res.data.token);
                                _this.redirectHandler(res.msg);
                            } else {
                                _this.$u.toast(res.msg);
                                _this.error = true;
                                _this.errorMsg = res.msg;
                            }
                        });
                    }
                }
            },
            // 重定向跳转 或者返回上一个页面
            redirectHandler(msg) {
                let _this = this;
                this.$refs.uToast.show({
                    message: msg, type: 'success', complete: function () {
                        _this.$db.set('timer', 0);
                        _this.$db.del('invitecode');
                        _this.showLogin = false;
                        _this.toLoginSuccessHandleBack();
                    }
                })
            },

            doToken() {
                const _this = this
                //console.log("重新获取用户数据");
                _this.getCode(function (code) {
                    var data = {
                        code: code
                    }
                    _this.$u.api.onLogin(data).then(res => {
                        if (res.status) {
                            if (res.data.auth) {
                                _this.$db.set('userToken', res.data.auth.token)
                                _this.$store.commit('hasLogin', true);
                            }
                            if (res.data.user) {
                                _this.$store.commit('userInfo', res.data.user);
                            }
                            _this.sessionAuthIdTool = res.otherData;
                            //console.log("成功后获取sessionAuthIdTool：" + _this.sessionAuthIdTool);
                        } else {
                            _this.$u.toast(res.msg);
                            _this.$store.commit('userInfo', "");
                            _this.sessionAuthIdTool = res.otherData;
                            //console.log("失败后获取sessionAuthIdTool：" + _this.sessionAuthIdTool);
                        }
                    })
                })
            },
            // 勾选版权协议
            checkboxChange(e) {
                this.agreement = e;
                if (e == true) {
                    this.isDisabled = false;
                } else {
                    this.isDisabled = true;
                }
                console.log(this.agreement);
            },
            // 隐藏登录弹窗
            hideModal() {
                this.showLogin = false;
            },
            // 去登录
            toAccountLogin() {
                this.showLogin = false;
                this.$u.route('/pages/login/loginByAccount/loginByAccount');
            },
            // 小程序，取消登录
            closeAuth() {
                this.showLogin = false;
                this.$u.toast('您已取消授权')
            },
            getCode: function (callback) {
                let _this = this
                uni.login({
                    // #ifdef MP-ALIPAY
                    scopes: 'auth_user',
                    // #endif
                    success: function (res) {
                        //console.log(res);
                        if (res.code) {
                            return callback(res.code)
                        } else {
                            //login成功，但是没有取到code
                            _this.$refs.uToast.show({ message: '未取得code，请重试', type: 'error', })
                        }
                    },
                    fail: function (res) {
                        //console.log(res);
                        var scene = this.$store.state.scene;
                        //判断是否为 朋友圈内打开“单页模式"，单页模式下，数据交互无法执行。所以不进行提醒
                        if (scene != 1154) {
                            _this.$refs.uToast.show({ message: '用户授权失败wx.login，请重试', type: 'error', })
                        }
                    }
                })
            },
            toLogin: function (data) {
                let _this = this
                _this.$u.api.loginByDecodeEncryptedData(data).then(res => {
                    if (res.status) {
                        //判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
                        if (res.data.token) {
                            //登陆成功，设置token，并返回上一页
                            _this.$db.set('userToken', res.data.token)
                            _this.$store.commit('hasLogin', true);
                            _this.$refs.uToast.show({ message: '登录成功', type: 'success', })
                            return false
                        } else {
                            // #ifdef MP-WEIXIN
                            _this.sessionAuthIdTool = res.data.sessionAuthId;
                            // #endif
                            // #ifndef MP-WEIXIN
                            _this.$u.route({ type: 'navigateTo', url: '/pages/login/loginBySMS/loginBySMS?sessionAuthId=' + res.data.sessionAuthId });
                            // #endif
                        }
                    } else {
                        _this.$refs.uToast.show({ message: '登录失败，请重试', type: 'error', })
                    }
                })
            },
            async getPhoneNumber(e) {
                if (this.agreement == false) {
                    this.$refs.uToast.show({ message: '请先勾选并同意服务', type: 'error', })
                    return false;
                } else {
                    let _this = this;
                    if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
                        var data = {
                            sessionAuthId: _this.sessionAuthIdTool,
                            iv: e.mp.detail.iv,
                            encryptedData: e.mp.detail.encryptedData,
                        }
                        //有推荐码的话，带上
                        var invitecode = _this.$db.get('invitecode')
                        if (invitecode) {
                            data.invitecode = invitecode
                        }
                        _this.toGetPhoneNumber(data);
                    } else if (e.mp.detail.errMsg == 'getPhoneNumber:fail user deny') {
                        _this.$u.toast('您已经取消了授权，将无法进行关键业务功能。');
                    }
                    else {
                        _this.$u.toast('如未授权，您可尝试使用手机号+短信验证码登录');
                    }
                    _this.agreement = false;
                    _this.isDisabled = true;
                    _this.showLogin = false;
                    console.log(e.mp.detail.errMsg);
                }

            },
            //实际的去登陆
            toGetPhoneNumber: function (data) {
                let _this = this
                _this.$u.api.loginByGetPhoneNumber(data).then(res => {
                    //console.log(res);
                    if (res.status) {
                        //判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
                        if (res.data.token) {
                            //console.log("登陆成功，设置token，并返回上一页");
                            //登陆成功，设置token，并返回上一页
                            _this.$db.set('userToken', res.data.token)
                            _this.$store.commit('hasLogin', true);
                            _this.showLogin = false;
                            _this.$refs.uToast.show({ message: '登录成功', type: 'success', })
                            return false
                        }
                    } else if (res.status == false && res.code == 500) {
                        //console.log("sessionId不正确，重载");
                        _this.$u.route({ type: 'switchTab', url: '/pages/index/default/default' });
                    } else {
                        _this.$u.toast('登录失败，请重试')
                    }
                })
            },
        }
    };
</script>

<style lang="scss" scoped>
    @import "coreshop-login-modal.scss";
</style>
